<div class="container">
    <h1>Refresh from url after use data option(<a href="https://github.com/wenzhixin/bootstrap-table/issues/137" target="_blank">#137</a>).</h1>
    <p><button id="button" class="btn btn-default">Refresh from url</button></p>

    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
        <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
        <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
    </div>
    <table id="table" data-use-row-attr-func="true" data-reorderable-rows="true">
        <!--上面的是可以拖动行排序的二个选项-->
        <!-->
        <table id="table" class="table table-hover">
            <-->
                <!--thead>
        <tr>
            <th data-field="Sort">排序值</th>
            <th data-field="Id">ID</th>
            <th data-field="Name">名称</th>
            <th data-field="Remark">说明</th>
        </tr>
        </thead-->
        </table>
</div>


<div class="container">
    <h1>Tree Column</h1>
    <p></p>
    <table id="table1" class="table table-hover">
        <thead>
            <tr>
                <th data-field="id">
                    ID
                </th>
                <th data-field="pid">
                    PID
                </th>
                <th data-field="name">
                    Item Name
                </th>
                <th data-field="price">
                    Item Price
                </th>
            </tr>
        </thead>
    </table>
</div>
<script>
    var $table = $('#table'),
        $remove = $('#remove');
    var $table1 = $('#table1');

    $('#button').click(function() {
        $table.bootstrapTable('refresh', {
            url: 'http://127.0.0.1:8080/test/GetDepartment'
        });
    });
    $remove.click(function() {
        var ids = getIdSelections();
        $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
        });
        $remove.prop('disabled', true);
    });

    function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="glyphicon glyphicon-heart"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
    window.operateEvents = {
        'click .like': function(e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row));
        },
        'click .remove': function(e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            });
        }
    };

    function initTable() {
        $table.bootstrapTable({
            url: '/static/data7.json',
            //url: '/test/GetDepartment',
            method: 'get', //请求方式（*）
            treeShowField: 'Name', //树形表的显示内容用哪个字段
            toolbar: '#toolbar', //工具按钮用哪个容器
            clickToSelect: true, //是否启用点击选中行
            striped: true, //是否显示行间隔色
            showRefresh: true, //是否显示刷新按钮
            uniqueId: "Id", //每一行的唯一标识，一般为主键列
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式

            //sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            //使用服务器分页后，没有数据显示了
            //queryParams: oTableInit.queryParams,//传递分页查询参数（*）
            //使用此选项后，没有数据显示了

            pagination: true, //是否显示分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 100, //每页的记录行数（*）
            pageList: [10, 25, 50, 100, 200], //可供选择的每页的行数（*）
            columns: [{
                    checkbox: true
                }, {
                    field: 'Sort',
                    title: '排序值',
                    editable: true,
                    sortable: true,
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'Id',
                    title: 'Id'
                }, {
                    field: 'Pid',
                    title: 'Pid'
                }, {
                    field: 'Name',
                    title: '名称',
                    editable: {
                        type: 'text',
                        title: 'Item Price',
                        validate: function(value) {
                            value = $.trim(value);
                            if (!value) {
                                return 'This field is required';
                            }
                            if (!/^\$/.test(value)) {
                                return 'This field needs to start width $.'
                            }
                            var data = $table.bootstrapTable('getData'),
                                index = $(this).parents('tr').data('index');
                            console.log(data[index]);
                            return '';
                        }
                    },
                }, {
                    field: 'Remark',
                    title: '说明'
                }, {
                    field: 'operate',
                    title: 'Item Operate',
                    align: 'center',
                    events: operateEvents,
                    formatter: operateFormatter
                }]
                /*data: [{
                    "Id": 0,
                    "Name": "Item 0",
                    "Remark": "$0"
                }]*/
        });
    };
    $(function() {
        initTable();
        $table1.bootstrapTable({
            treeShowField: 'name',
            url: '/static/data7.json'
        });
    });
</script>